<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>监听子组件</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <text-component v-model="text"></text-component>
    <button @click="text += '!'">点我测试</button>
  </div>

</body>

<!--  
  父组件监听子组件首先需要子组件暴露一个对外的props
  然后父组件通过v-model将子组件的props与外部的data中的数据进行绑定
  如此达到监听的目的
 -->


<script type="text/javascript">
  Vue.config.productionTip = false;

  Vue.component("text-component", {
    props: ['value'],
    template: `<div>
        <h1>{{value}}</h1>
        <input type="text" v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"></input>
      </div>`,
  })


  new Vue({
    el: '#root',
    data: {
      text: ''
    },
    methods: {}
  })
</script>

</html>